<template>
    <el-container style="height: 90vh;">
      <!-- 聊天室列表 -->
      <el-main>
        <el-list>
          <el-list-item
            v-for="chat in chatRooms"
            :key="chat.id"
            class="chat-list-item"
            @click="openChat(chat)">
            <el-avatar :src="chat.avatar" size="large" class="chat-avatar"></el-avatar>
            <div class="chat-info">
              <span class="chat-name">{{ chat.name }}</span>
              <div class="chat-last-message">
                <span>{{ chat.lastMessage }}</span>
                <span class="chat-time">{{ chat.time }}</span>
              </div>
            </div>
          </el-list-item>
        </el-list>
      </el-main>
  
      <!-- 弹出聊天窗口 -->
      <el-dialog
        v-model="dialogVisible"
        :title="currentChatRoom?.name"
        width="50%"
        top="10vh"
        append-to-body
        :before-close="handleClose"
      >
        <div v-if="currentChatRoom" class="chat-content">
          <!-- 聊天内容 -->
          <div v-for="message in currentChatRoom.messages" :key="message.id" class="chat-message">
            <el-avatar :src="message.avatar" size="small" class="chat-avatar"></el-avatar>
            <div class="message-content">
              <p class="message-text">{{ message.text }}</p>
              <span class="message-time">{{ message.time }}</span>
            </div>
          </div>
        </div>
        <template #footer>
          <el-input
            v-model="newMessage"
            placeholder="输入消息..."
            @keyup.enter.native="sendMessage"
            class="chat-input"
          ></el-input>
          <el-button type="primary" @click="sendMessage">发送</el-button>
        </template>
      </el-dialog>
    </el-container>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { format } from 'date-fns'; // 用于格式化时间
  
  // 模拟聊天室数据
  const chatRooms = ref([
    {
      id: 1,
      name: '工作群',
      avatar: 'https://i.pravatar.cc/50?img=1',
      lastMessage: '这周的任务分配...',
      time: '10:30',
      messages: [
        { id: 1, text: '任务分配', avatar: 'https://i.pravatar.cc/50?img=1', time: '10:30' },
        { id: 2, text: '周会安排', avatar: 'https://i.pravatar.cc/50?img=2', time: '10:32' }
      ]
    },
    {
      id: 2,
      name: '家庭群',
      avatar: 'https://i.pravatar.cc/50?img=2',
      lastMessage: '大家周末聚一下吗？',
      time: '09:45',
      messages: [
        { id: 1, text: '周末聚会', avatar: 'https://i.pravatar.cc/50?img=2', time: '09:45' },
        { id: 2, text: '假期计划', avatar: 'https://i.pravatar.cc/50?img=3', time: '09:47' }
      ]
    },
    {
      id: 3,
      name: '朋友群',
      avatar: 'https://i.pravatar.cc/50?img=3',
      lastMessage: '今晚一起吃饭？',
      time: '08:20',
      messages: [
        { id: 1, text: '今晚吃饭', avatar: 'https://i.pravatar.cc/50?img=3', time: '08:20' },
        { id: 2, text: '下次聚会', avatar: 'https://i.pravatar.cc/50?img=4', time: '08:22' }
      ]
    }
  ]);
  
  const dialogVisible = ref(false);
  const currentChatRoom = ref(null);
  const newMessage = ref('');
  
  // 打开聊天窗口的函数
  function openChat(chat) {
    // 设置当前聊天室
    currentChatRoom.value = chat;
  
    // 显示弹窗
    dialogVisible.value = true;
  }
  
  // 发送消息的函数
  function sendMessage() {
    if (newMessage.value.trim() === '') return;
  
    const now = new Date();
    const formattedTime = format(now, 'HH:mm');
  
    // 添加新消息到聊天室
    currentChatRoom.value.messages.push({
      id: currentChatRoom.value.messages.length + 1,
      text: newMessage.value,
      avatar: 'https://i.pravatar.cc/50?img=1', // 假设用户头像
      time: formattedTime
    });
  
    // 清空输入框
    newMessage.value = '';
  
    // 更新聊天室列表中的最后一条消息
    currentChatRoom.value.lastMessage = newMessage.value;
    currentChatRoom.value.time = formattedTime;
  }
  
  // 关闭对话框前的处理
  function handleClose(done) {
    // 可以在这里添加关闭前的逻辑，比如保存聊天记录等
    done();
  }
  </script>
  
  <style scoped>
  .chat-list-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
  }
  
  .chat-avatar {
    margin-right: 15px;
  }
  
  .chat-info {
    display: flex;
    flex-direction: column;
  }
  
  .chat-name {
    font-size: 16px;
    font-weight: bold;
  }
  
  .chat-last-message {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
  }
  
  .chat-time {
    color: #999;
  }
  
  .el-dialog {
    z-index: 9999; /* 确保弹窗在最上层 */
    position: relative;
  }
  
  .chat-content {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
  }
  
  .chat-message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }
  
  .message-content {
    margin-left: 10px;
    max-width: 80%;
  }
  
  .message-text {
    word-break: break-all;
  }
  
  .message-time {
    color: #999;
    font-size: 12px;
  }
  
  .chat-input {
    width: 70%;
    margin-right: 10px;
  }
  </style>